<template>
	<el-card class="form-container">
		<el-form :model="addForm" ref="addForm" :rules="dataRule"  @keyup.enter.native="submit()" label-width="100px">
			<el-form-item label="菜单类别">
				<el-radio-group v-model="addForm.menuType">
					<el-radio label="dirt">目录</el-radio>
					<el-radio label="menu">菜单</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="上级菜单" prop="parentCode">
				<treeselect
					v-model="addForm.parentCode"
					:options="menuOptions"
					:normalizer="normalizer"
					:show-count="true"
					placeholder="选择上级菜单"
				/>
			</el-form-item>
			<el-form-item label="菜单名称" prop="menuName">
				<el-input v-model="addForm.menuName"  placeholder="请输入菜单名称"></el-input>
			</el-form-item>
			<el-form-item label="菜单地址" prop="menuUrl">
				<el-input v-model="addForm.menuUrl"  placeholder="菜单地址" ></el-input>
			</el-form-item>
			<el-form-item label="菜单图标" prop="menuIcon">
				<el-popover
					placement="bottom-start"
					width="510"
					trigger="click"
					@show="$refs['iconSelect'].reset()"
				>
				<IconSelect ref="iconSelect" @selected="selected" />
					<el-input slot="reference" v-model="addForm.menuIcon" placeholder="点击选择图标" readonly>
						<svg-icon
							v-if="addForm.menuIcon"
							slot="prefix"
							:icon-class="addForm.menuIcon"
							class="el-input__icon"
							style="height: 40px;width: 20px;"
						/>
						<i v-else slot="prefix" class="el-icon-search el-input__icon" />
					</el-input>
				</el-popover>
			</el-form-item>
			<el-form-item label="授权编码" prop="authCode">
				<el-input v-model="addForm.authCode"  placeholder="请输入授权编码" ></el-input>
			</el-form-item>
			<el-form-item label="菜单排序" prop="menuSort">
				<el-input v-model="addForm.menuSort"  placeholder="请输入" ></el-input>
			</el-form-item>
			<el-form-item label="菜单状态" prop="menuStatus">
				<el-input v-model="addForm.menuStatus"  placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="前端组件" prop="menuComponent">
				<el-input v-model="addForm.menuComponent"  placeholder="请输入" ></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary"  @click="submit('addForm')">确定</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import {addSystemMenu ,validataMenuExist,findMenuTree } from '@/api/admin/systemMenu'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default{
	name:'add-menu',
	data(){
		var validateMenuName = (rule, value, callback) =>{
			validataMenuExist(value).then(() =>{
				callback();
			}).catch((err) => {
				return callback(new Error(err.data.responseMessage));
			});
		};
		return{
			menuOptions:[],
			addForm:{
				menuName: '',
				menuType: '',
				menuUrl: '',
				menuIcon: '',
				authCode: '',
				menuSort: '',
				menuStatus: '',
				menuComponent: '',
				parentCode:null
			},
			menuStates: [
				{
					label:'启用',
					value:'1'
				},
				{
					label:'禁用',
					value:'2'
				},
			],
			dataRule:{
				menuName: [
					{ required: true, message: '请输入菜单名', trigger: 'blur'},
					{ validator: validateMenuName, trigger: 'blur' }
				],
			}
		}
	},
	components:{
		Treeselect,
		IconSelect
	},
	created(){
		//初始化菜单树
		this.initTreeList();
	},
	methods:{
		//初始化菜单树
		initTreeList(){
			findMenuTree().then(res =>{
				this.menuOptions = [];
				const menu = { menuCode: 0, menuName: '主类目', children: [] };
				menu.children = this.handleTree(res.data.responseData, "menuCode","parentCode");
				console.log(menu)
				this.menuOptions.push(menu);
			})
		},
		
		/** 转换菜单数据结构 */
		normalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children;
			}
			return {
				id: node.menuCode,
				label: node.menuName,
				children: node.children
			};
		},
		selected(name) {
			this.addForm.menuIcon = name;
		},
		cancel(){
			this.$router.go(-1)
		},
		submit(){
			this.$refs['addForm'].validate((valid) => {
				if (!valid) {
					return false
				}
				addSystemMenu(this.addForm).then(() => {
					this.$notify({
						title: '添加成功',
						message: '添加菜单成功',
						type: 'success',
						duration: 2000,
						onClose: this.$router.go(-1)
					})
				})
			})
		}
		
	}
}
</script>

<style>
</style>
